window.addEvent ('domready', function () {
	
	// Variables de Drags y Drops
	var $drags = $$('#drags div');
	var $drops = $$('#drops div ');
	
	// Modificamos el desplazamiento de del fondo de los drops (background-position).
	$drops.each (function ($drop, iI) {
		var $bgPos = iI*(-180).toString() + 'px -180px';
		$drop.setStyle ('background-position', $bgPos);
	});
	
	/*
	for (var i = 0 ; i < $drags.length; i++){
		var myDrag = new Drag.Move($drags[i], {
		    droppables: '.drop'	 
		});
	}
	*/

	// Creamos objeto tipo Drag and Drop Basico
	miDxD = new DxD ($drags, $drops, {
		container: $('content'),
		dragDelete: true,
		sendToBack: 'ini',
		cssClass: 'miDxD',
		adjDrags: [
			{ x: 10, y: 300 },
			{ x: 210, y: 300 },
			{ x: 410, y: 300 },
			{ x: 610, y: 300 },
		],
		adjDrops: [
			{ x: 10, y: 10 },
			{ x: 210, y: 10 },
			{ x: 410, y: 10 },
			{ x: 610, y: 10 },
		]
	});

	miDxD.addEvents ({
		'beforeStart': function ($objDrag) {
			//$table ('<b>onBeforeStart</b> in drag <b>' + $objDrag.ind + '</b>');
		},
		'start': function ($objDrag) {
			//$table ('<b>onStart</b> in drag <b>' + $objDrag.ind + '</b>');
		},
		
		'drag': function ($objDrag) {
			//$table ('<b>onDrag</b> in drag <b>' + $objDrag.ind + '</b>. pos.left: <b>' + $objDrag.pos.left + '</b>. pos.top: <b>' + $objDrag.pos.top + '</b>');
		},
		'complete': function ($objDrag) {
			//$table ('<b>onComplete</b> in drag <b>' + $objDrag.ind + '</b>');
			
		},
		
		'enter': function ($objDrag, $objDrop) {
			$table ('<b>onEnter</b>. Drag <b>' + $objDrag.ind + '</b> enter to Drop <b>' + $objDrop.ind + '</b>');
		},
		
		'leave': function ($objDrag, $objDrop) {
			$table ('<b>onLeave</b>. Drag <b>' + $objDrag.ind + '</b> has leave to Drop <b>' + $objDrop.ind + '</b>');
		},
		
		'drop': function ($objDrag, $objDrop, $htmlDragNode, $htmlDropNode) {
			$table ('<b>onDrop</b>. Drag <b>' + $objDrag.ind + '</b> has dropped to Drop <b>' + $objDrop.ind + '</b>');
			
			$htmlDragNode.set ('html',  
				'<p>ind: <b>'+$objDrag.ind+'</b></p>' + 
				'<p>hasDroppedOver: <b>'+$objDrag.hasDroppedOver+'</b></p>'
			);
			
			$htmlDropNode.set ('html',  
				'<p>ind: <b>'+$objDrop.ind+'</b></p>' + 
				'<p>cntDrops: <b>'+$objDrop.cntDrops+'</b></p>' +
				'<p>isDropped: <b>'+$objDrop.isDropped+'</b></p>' + 
				'<p>dragsInDrop: <b>'+$objDrop.dragsInDrop.length+'</b></p>'
			);			
		},
		'emptyDrop': function ($objDrag, $htmlDragNode, $objLastDropped, $htmlLastDropped) {
			$htmlDragNode.set ('html',  
				'<p>ind: <b>'+$objDrag.ind+'</b></p>' + 
				'<p>hasDroppedOver: <b>'+$objDrag.hasDroppedOver+'</b></p>'
			);
			
			if ($objLastDropped) {
				$htmlLastDropped.set('html', '<p>ind: <b>' + $objLastDropped.ind + '</b></p>' +
				'<p>cntDrops: <b>' +
				$objLastDropped.cntDrops +
				'</b></p>' +
				'<p>isDropped: <b>' +
				$objLastDropped.isDropped +
				'</b></p>' +
				'<p>dragsInDrop: <b>' +
				$objLastDropped.dragsInDrop.length +
				'</b></p>');
			}
		}

	});
	
	var $deskInfo = $('eventInfo');
	var $p = $$('#eventInfo p');
	var $num = 0;
	$table = function ($msg) {
		var $last = new Element('p', {'html': $num + ' | ' + $msg + '.', 'class': ($num%2) ? 'par' : 'none'});
		$last.inject($deskInfo, 'top');	

		$p = $$('#eventInfo p');
		$p.getLast().dispose();

		$num++;
	}
	
			
});